<template>
  <router-link class="search_bar " to="/search">
    <div class="img_wrap">
      <img src="/qxqstatic/sousuo.png"/>
    </div>
    <div class="keyword ellipsis">{{kw||'搜索'}}</div>
    <img src="/qxqstatic/cuowu.png" class="cuowu" @click="home">
  </router-link>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
  name:'SearchBar',
})
</script>

<script setup lang="ts">
defineProps(['kw'])
const router = useRouter()
const home = () => { 
  router.push('/')
}
</script>

<style scoped>
.search_bar{
  max-width:100%;
  height:30px;
  line-height: 30px;
  border-radius: 15px;
  background-color: #eff1f4;
  color:#ababab;
  font-size:12px;
  display:flex;
  align-items: center;
  position:relative;
}
.keyword{
  max-width: 70%;
  white-space: nowrap;
  box-sizing: border-box;
}
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
}
.search_bar .img_wrap{
  width:30px;
  height:30px;
  display: flex;
  place-items: center;
  transform: translateX(7px);
}
.search_bar .cuowu{
  width:14px;
  height:14px;
  top:7px;
  right:7px;
  position: absolute;
}
.img_wrap img{
  width:14px;
  height:14px;
  display: block;
}
</style>